<script setup>
import { ref } from 'vue';
import CanvasTable from './components/table/canvas/Merge500CanvasTable.vue';
import CanvasTest from './components/table/canvas/CanvasTest.vue';
import Demo from './components/table/Demo.vue';
// import VirCanvas from './components/table/VirTable.vue';

const columns = [
  {
    label: '序号',
    prop: 'index',
    width: 60,
    align: 'center',
  },
  {
    label: '列1',
    prop: 'id',
    align: 'left',
    width: 120,
  },
  {
    label: '列2',
    prop: 'name',
    align: 'center',
    width: 120,
  },
  {
    label: '列3',
    prop: 'age',
    align: 'right',
    width: 120,
  },
  {
    label: '列4',
    prop: 'address',
    align: 'center',
    width: 120,
  },
  {
    label: '列5',
    prop: 'operation1',
    align: 'center',
    width: 120,
  },
  {
    label: '列6',
    prop: 'operation2',
    align: 'center',
    width: 120,
  },
  {
    label: '列7',
    prop: 'operation3',
    align: 'center',
    width: 120,
  },
  {
    label: '列8',
    prop: 'operation4',
    align: 'center',
    width: 120,
  },
  {
    label: '列9',
    prop: 'operation5',
    align: 'center',
    width: 120,
  },
  {
    label: '列10',
    prop: 'operation6',
    align: 'center',
    width: 120,
  },
  {
    label: '列11',
    prop: 'operation7',
    align: 'center',
    width: 120,
  },
];

const data = [];
const getData = () => {
  for (let i = 0; i < 10000000; i++) {
    data.push({
      index: i + 1,
      id: `ID${i + 1}`,
      name: `姓名${i + 1}`,
      age: 20 + i,
      address: `地址${i + 1}`,
      operation1: '操作1',
      operation2: '操作2',
      operation3: '操作3',
      operation4: '操作4',
      operation5: '操作5',
      operation6: '操作6',
      operation7: '操作7',
    });
  }
};

getData();
</script>

<template>
  <div>
    <!-- <CanvasTable></CanvasTable> -->
    <!-- <CanvasTest :columns="columns" :data="data" border></CanvasTest> -->
    <!-- <VirCanvas></VirCanvas> -->
    <Demo></Demo>
  </div>
</template>

<style scoped></style>
